


import React, { FC  , useEffect, useState } from 'react'
import { ProgressCircle, Space } from 'antd-mobile'
import { useTimeDownCounter } from '@/hooks/common';
import { useCountDown, useInterval } from 'ahooks';
import { history } from 'umi';

const Dao:FC<{
    style?:any
    color?:string,
    time?:any,
    onEnd?:any
}> = ({
    style,
    color,
    time,
    onEnd
}) => {

    const total = 100; 
    const gotowhere = ()=>{
        if(onEnd){
            onEnd()
        }else{
            history.push('/app')
        }
    }
    // const [percent] = useTimeDownCounter(time * 1000, time * 1000 / total ,gotowhere)

    const [counter,setCounter]= useState<number>(0) 
    
    useInterval(()=>{
        if(counter<total){
            setCounter(counter+1)
        }else{
            gotowhere()
        }
    },time*1000/total)  // time * 1000 / total = 50


    return (
        <div className="dao" style={{position:'absolute',zIndex:1000,...style}} onClick={gotowhere} >
            <ProgressCircle
                percent={counter}
                style={{
                    '--fill-color': 'var(--adm-color-success)',
                    '--size':'1.5rem',
                    color:color,
                }}
            >
                {counter}%
            </ProgressCircle>
        </div>
        
    )
}
Dao.defaultProps = {
    style:{
        top:'0.53rem',
        right:'0.53rem', 
        
    },
    color:"#fff",
    time:5,
    
}
export default Dao